@use 'design-system' as *;

.container {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 15px;
}

.chevronContainer {
    display: flex;
    justify-content: center;
    height: 20px;
    width: 20px;
    line-height: 20px;

    -moz-border-radius: 32px; /* or 50% */
    border-radius: 32px; /* or 50% */

    background: var(--color-util-brand-500);
    color: white;
    text-align: center;
    font-size: 2em;
    margin-right: $spacing-size-2;
    transition:
        background-color $transition-default-timing,
        transform 0.33s ease-in-out;

    &:hover {
        background: var(--color-util-brand-700);
    }

    &.isExpanded {
        transform: rotate(90deg);
    }
}

.chevronImage {
    width: 16px;
    height: 16px;
    margin: 2px 0 0 1px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(200deg) brightness(102%) contrast(104%);
}
